class Magnifier{
    constructor(smallBox,mask,bigBox) {
        this.oSmallBox = smallBox;
        this.oMask = mask;
        this.oBigBox = bigBox;
        this.eventBind();
    }
    
    mouseover(){
        let that = this;
         this.oSmallBox.onmouseover= function(){
             that.oMask.style.display = "block";
             that.oBigBox.style.display = "block"
         }
    }
    
    mouseout(){
        let that = this;
         this.oSmallBox.onmouseout= function(){
             that.oMask.style.display = "none";
             that.oBigBox.style.display = "none"
         }
    }
    
    mousemove(){
        let that = this;
        this.oSmallBox.onmousemove= function(evt){
            let e = evt||event
            let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth*2 ;
            let top = e.pageY - this.offsetTop - that.oMask.offsetHeight*1.2 ;
            
            if(left<0){
                left = 0;
            }
            let maxLeft = this.offsetWidth - that.oMask.offsetWidth;
            
            if(left>maxLeft){
                left = maxLeft;
            }
            
            if(top<0){
                top = 0;
            }
            let maxTop = this.offsetHeight - that.oMask.offsetHeight;
            
            if(top>maxTop){
                top = maxTop;
            }
            
            let x = that.oBigBox.offsetWidth*left/that.oMask.offsetWidth;
            let y = that.oBigBox.offsetHeight*top/that.oMask.offsetHeight;
            
            that.oMask.style.left = left + "px";
            that.oMask.style.top = top + "px";
            
            that.oBigBox.style.backgroundPositionX = -0.5*x+"px";
            that.oBigBox.style.backgroundPositionY = -0.5*y+"px";
        }
    }
    
    eventBind(){
        this.mouseover();
        this.mouseout();
        this.mousemove();
    }
}